<template>
<div>
  <div v-for="(v,i) in 8" :key="i">
<div class="box" v-for="v in good" :key="v.id" @click="tiao(v.id)">
    <div class="let">
      <img
        :src="v.img"
        
      />
    </div>
    <ul>
      <li>
        <van-tag type="warning">小米自营</van-tag> <i>{{v.name}}</i>
      </li>
      <li><em>{{v.texte}}</em>|<em>蓝牙链接</em>|<em>外部电源</em></li>
      <p><span>￥</span>{{v.money}}</p>
    </ul>
  </div>
  </div>



</div>
  
</template>

<script>
import getlink from "@/api/apiserver.js";
export default {
  data() {
    return {
      id: 0,
      arr: [],
      num: [],
      good:[],
    };
  },
  computed: {
    // fn() {
    //   return this.$store.state.actionsm.xiao;
    // },
  },
  mounted() {
    // this.id = this.$route.query.id;
    

    getlink("/xiangqing").then((ok) => {
      // console.log(ok.data.xiangqing);
        // this.num = this.id

      this.arr = ok.data
   
    // console.log(this.arr);
     this.good = this.arr.filter((v) => {
          if (v.id == this.$route.query.id) {
            return v;
          }

  })
    });
  },
  methods:{
      tiao(id){
           this.$router.push({path:'/Xq',query:{id:id}})
      }
  }
};
</script>

<style scoped>
.box {
  width: 100%;
  display: flex;
  justify-content: space-between;
  background-color: #ffff;
  margin-bottom: 0.1rem;
}
.let img {
  width: 1.09rem;
  height: 1.09rem;
  display: inline-block;
  margin-left: 0.1rem;
}
.let {
  width: 40%;
}
ul {
  width: 60%;
  margin-right: 0.5rem;
}
li {
  width: 2.68rem;
  text-align: center;
  margin-top: 0.1rem;
}
i {
  font-size: 0.14rem;
  font-weight: 500;
}
em {
  font-size: 0.14rem;
  font-weight: 500;
  margin-right: 0.1rem;
  margin-left: 0.1rem;
}
p {
  margin-top: 0.2rem;
  margin-left: 0.2rem;
  font-weight: 600;
  font-size: 0.17rem;
  color: rgb(235, 86, 17);
}
</style>
